<template>
  <div class="login-containe">
    <div class="login-box">
      <div class="login-logo">
        <img src="../../assets/logo.png" />
      </div>
      <el-form :model="ruleForm" :rules="loginRules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input
            v-model.trim="ruleForm.username"
            prefix-icon="el-icon-search"
            placeholder="请输入账号"
            ref="userRef"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model.trim="ruleForm.password"
            prefix-icon="el-icon-search"
            placeholder="请输入密码"
            type="password"
            ref="passwordRef"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="loginUser">登录</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        //表单数据对象
        username: "admin",
        password: "123456"
      },
      loginRules: {
        //登录表单验证规则
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      query: ""
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        //监听路由变化
        this.query = route.query.redirect;
        window.console.log(this.query);
      },
      immediate: true
    }
  },
  methods: {
    //登录
    loginUser() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          return;
        } else {
          //发起请求
          const { data: res } = await this.$axios.post("login", this.ruleForm);
          if (res.meta.status === 200) {
            //登陆成功存储token，并且跳转页面
            this.$message.success("登陆成功");
            window.sessionStorage.setItem("token", res.data.token);
            // const redirect = this.$route.query.redirect;
            // if (redirect) {
            //   //如果存在上一个页面跳转过来的数据
            //   this.$router.replace(redirect);
            // } else {
            //   this.$router.push("/home");
            // }
            window.console.log(this.query);
            this.$router.push({ path: this.query || "/home" });
          }
        }
      });
    },
    resetForm() {
      //重置
      this.$refs.loginFormRef.resetFields();
    }
  },
  mounted() {
    //内容为空时自动获取焦点
    if (this.ruleForm.username === "") {
      this.$refs.userRef.focus();
    } else if (this.ruleForm.password === "") {
      this.$refs.passwordRef.focus();
    }
  }
};
</script>

<style scoped>
.login-containe {
  position: absolute;
  background-color: #2b4b6b;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.login-box {
  position: absolute;
  width: 450px;
  height: 300px;
  left: 50%;
  top: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  border-radius: 3px;
}
.login-logo {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #fff;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  box-shadow: 0 0 10px #eee;
}
.login-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}

.el-form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
}
.btns {
  display: flex;
  justify-content: space-between;
}
</style>